<template>
	<view class="container">
		<navbar :isBack="false" title="练习中心">
			<view class="local-search" @click="showDrawer">
				<view class="top-tips">切换题库</view>
				<text class="text iconfont iconxiangxia1"></text>
			</view>
		</navbar>
		<view class="mybg-box">
			<view class="header-center">
				<image v-if="userInfo" :src="userInfo.avatarUrl" class="avatar"></image>
				<view v-else class="iconfont icontxxg avatar-icon" @click.stop="$tools.toPage('pages/login')"></view>
				<view class="info" @click.stop="userInfo?'':$tools.toPage('pages/login')">
					<view class="nickname">{{'高等数学'}}
					</view>
					<view class="explain">
						<view>总题数：2626 </view>
						<view>答对：700</view>
					</view>
				</view>
				<view class="tips">
					已答：1000
				</view>
			</view>
			<view class="box tool-box">
				<view class="order-list flex-wrap">
					<view class="tool-item" @click="$tools.toPage('pages/brush/before')">
						<view class="tool-icon iconfont iconRectangleCopy"></view>
						<view class="tool-text">历年真题</view>
					</view>
					<view class="tool-item" @click="$tools.toPage('pages/exam/index')">
						<view class="tool-icon iconfont icondingdan_huaban"></view>
						<view class="tool-text">模拟考试</view>
					</view>
					<view class="tool-item" @click="$tools.toPage('pages/brush/record')">
						<view class="tool-icon iconfont iconlishijilu_huaban"></view>
						<view class="tool-text">练习记录</view>
					</view>
					<view class="tool-item" @click="$tools.toPage('pages/brush/error')">
						<view class="tool-icon iconfont iconliebiaoxingshi"></view>
						<view class="tool-text">错题集</view>
					</view>
					<view class="tool-item" @click="$tools.toPage('pages/brush/collect')">
						<view class="tool-icon iconfont iconwodeshoucang"></view>
						<view class="tool-text">我的收藏</view>
					</view>
					<view class="tool-item" @click="$tools.toPage('pages/mine/edit')">
						<view class="tool-icon iconfont iconwode"></view>
						<view class="tool-text">个人设置</view>
					</view>
					<view class="tool-item">
						<view class="tool-icon iconfont iconicon_kefu"></view>
						<view class="tool-text">客服服务</view>
						<button class="share-position share-btn" open-type="contact"></button>
					</view>


				</view>
			</view>
		</view>

		<view class="chapter-list">
			<view class="title">
				章节同步题库
			</view>
			<view class="item" v-for="(v,k) in chapterList" :key="k" @click.stop="toBrush(v)">
				<view class="chapter-title">
					{{v.title}}
					<view class="sub-title">
						正确率：{{v.rightPer}}%
					</view>
				</view>
				<view class="read-vip">
					<view>{{v.use}}/{{v.sum}}</view>
					<view style="text-align: center;">{{v.isFree?'练习':'会员'}}</view>
				</view>
			</view>
		</view>

		<uni-drawer ref="showLeft" mode="left" :mask-click="false" :width="w-50">
			<view class="close-btn" @click="closeDrawer">
				<text class="iconfont iconclose_cricle "></text>
			</view>
			<scroll-view :style="{height: h-navbarHeight+'px',marginTop:navbarHeight+'px'}" scroll-y
				@scrolltolower="loadData">
				<view class="chapter-list">
					<view class="title">
						目录 <text>共{{chapterList.length}}案例</text>
					</view>
					<view class="item" v-for="(v,k) in chapterList" :key="k" @click.stop="toBrush(v)">
						<view class="chapter-title">
							{{v.title}}
						</view>
						<view class="read-vip">
							{{v.isFree?'试读':'会员'}}
						</view>
					</view>
				</view>
			</scroll-view>
		</uni-drawer>
		<bottomPopup :show="shareShow" @close="shareHide">
			<view class="popup-box">
				<view class="show-share">
					<view class="line"></view>
					<view class="title">分享到</view>
					<view class="line"></view>
				</view>
				<view class="share-block">
					<button class="item" open-type="share">
						<text class="iconfont iconweixin1" style="color: #2ba245;"></text>
						<view>微信好友</view>
					</button>
					<!-- <button class="item" @click.stop="">
						<text class="iconfont iconqunfengpengyouquan" style="color: #2ba245;"></text>
						<view>微信朋友圈</view>
					</button> -->
					<!-- #ifdef H5 -->
					<button class="item" @click.stop="">
						<text class="iconfont iconqq-circle" style="color: #298df8;"></text>
						<view>QQ</view>
					</button>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<button class="item" @click.stop="">
						<text class="iconfont iconzhifubao" style="color: #3f77ff;"></text>
						<view>支付宝</view>
					</button>
					<!-- #endif -->
				</view>
			</view>
		</bottomPopup>
		<!-- <backTop :scrollTop="scrollTop" /> -->
	</view>
</template>

<script>
	import bottomPopup from '@/components/bottomPopup';
	export default {
		components: {
			bottomPopup
		},
		data() {
			return {
				navbarHeight: 64,
				w: 0,
				h: 0,
				scrollTop: 0,
				height: 64,
				top: 26, 
				scrollH: 0, 
				userInfo:"",
				bk_id: 0,
				shareShow: false,
				chapterList: [{
						title: '第一章 导论',
						use: 10,
						sum: 100,
						rightPer: 65,
						isFree: 1
					},
					{
						title: '第二章 高等数学',
						use: 0,
						sum: 100,
						rightPer: 0,
						isFree: 0
					},
					{
						title: '第三章 高等物理',
						use: 0,
						sum: 100,
						rightPer: 0,
						isFree: 0
					}
				],
				book: {},
				sumPage: 0,
				page: 1,
				limit: 10,
			};
		},
		onLoad(e) {
			if (typeof e.bk_id != 'undefined' && typeof parseInt(e.bk_id) == 'number') {
				this.bk_id = e.bk_id;
				this.book = uni.getStorageSync('bookDetail')
				// this.getChapter();
			} else {
				// uni.navigateBack();
			}
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						this.w = res.windowWidth;
						this.h = res.screenHeight;
						console.log(this.h)
					}
				});
			}, 0);

		},
		async onShow() {

		},
		onShareAppMessage() {

		},
		onShareTimeline() {

		},
		methods: {
			showDrawer() {
				this.$refs.showLeft.open();
			},
			closeDrawer() {
				this.$refs.showLeft.close();
			},
			toBrush(item) {
				this.$tools.toPage(
					`pages/brush/list`
				)
			},
			onReachBottom() {
				if (this.page >= this.sumPage) return uni.showToast({
					title: '已经到底了!',
					icon: 'none',
					duration: 1500
				})
				this.page++
				uni.showLoading({
					title: '加载中...'
				})
				this.getChapter()
			},
			getChapter() {
				this.$tools.req(this.$urls.chapterList, {
					bk_id: this.bk_id,
					page: this.page,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						if (this.page == 1) {
							this.chapterList = res.data.chapterList
						} else {
							this.chapterList = this.chapterList.concat(res.data.chapterList)
						}
						this.sumPage = res.data.sumPage
					}
				})
			},
		}
	};
</script>

<style lang="scss">
	.close-btn {
		padding: 0 0 0 59rpx;
		background: #fff;
		position: absolute;
		right: -60rpx;
		top: 48%;
		color: $themeColor;
		border-top-right-radius: 30rpx;
		border-bottom-right-radius: 30rpx;

		.iconfont {
			font-size: 60rpx;
		}
	}

	.local-search {
		padding: 0 25upx;
		max-width: 300upx;
		height: 50upx;
		border-radius: 35upx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
		margin-left: 20upx;

		.text {
			font-size: 25upx;
		}

		.top-tips {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 165upx;
			margin-left: 10upx;
			font-size: 25upx;
		}
	}

	.mybg-box {
		width: 100%;
		position: relative;
		background: $themeColor;
		padding-bottom: 20rpx;
	}

	.my-bg {
		width: 100%;
		height: 464rpx;
		display: block;
	}

	.header-center {
		padding: 50rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		z-index: 1;
	}

	.avatar {
		flex-shrink: 0;
		width: 128rpx;
		height: 128rpx;
		display: block;
		border-radius: 50%;
	}

	.avatar-icon {
		color: #f2f2f2;
		font-size: 128rpx;
		border-radius: 50%;
	}

	.info {
		width: 60%;
		padding-left: 30rpx;

	}

	.nickname {
		font-size: 35rpx;
		font-weight: 500;
		color: #fff;
		display: flex;
		align-items: center;
	}

	.img-vip {
		width: 56rpx;
		height: 24rpx;
		margin-left: 18rpx;
	}

	.explain {
		width: 70%;
		font-size: 24rpx;
		font-weight: 400;
		color: #fff;
		opacity: 0.9;
		padding-top: 8rpx;
	}

	.tips {
		width: 30%;
		font-size: 28rpx;
		color: #fff;
		padding-right: 10rpx;
	}

	.box {
		background: #fff;
		box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
		border-radius: 10rpx;
		overflow: hidden;
	}

	.order-box {
		height: 208rpx;
		margin-top: 20rpx;
	}

	.cell-header {
		width: 100%;
		height: 74rpx;
		padding: 0 26rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx #eee dashed;
	}

	.cell-title {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: 600;
		color: #333;
	}

	.cell-sub {
		font-size: 26rpx;
		font-weight: 400;
		color: #666;
	}

	.cell-sub text {
		font-size: 24rpx;
	}

	.order-list {
		width: 100%;
		height: 134rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

	}

	.order-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.order-text,
	.tool-text {
		font-size: 24rpx;
		font-weight: 400;
		color: #555;
		padding-top: 4rpx;
	}

	.tool-text {
		font-size: 24rpx;
	}

	.tool-box {
		margin: 15rpx 30rpx;
	}

	.flex-wrap {
		flex-wrap: wrap;
		height: auto;
		padding-bottom: 30rpx;
	}

	.tool-item {
		position: relative;
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-top: 30rpx;
	}

	.tool-icon {
		font-size: 60rpx;
		color: #555;
	}


	.chapter-list {
		margin: 25rpx 25rpx 50rpx 25rpx;

		.title {
			color: #333;
			font-size: 30rpx;
			margin-bottom: 40rpx;

			text {
				margin-left: 25rpx;
				color: #555;
				font-weight: normal;
				font-size: 30rpx
			}
		}

		.item {
			display: flex;
			justify-content: space-between;
			padding: 25rpx 0;
			border-bottom: 1rpx #cfcfcf solid;

			.chapter-title {
				font-size: 30rpx;
				width: 85%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				.sub-title {
					font-size: 25rpx;
					color: #666;
				}
			}

			.read-vip {
				font-size: 28rpx;
				color: $themeColor;
			}
		}
	}
</style>